import { Component, Vue } from 'vue-property-decorator';
import { debounce } from '..';

@Component({})
export default class  CommonMixins extends Vue {
  // 分页配置
  pagination: any = {
    current: 1,
    pageSize: 10,
    defaultPageSize: 10,
    defaultCurrent: 1,
    total: 0,
    showTotal: (total: number, range: number[]) => `当前页面 ${range[1] - range[0] + 1} 条`,
    onChange: (pageNumber: number) => this.pagination.current = pageNumber,
  };
  scroll = { x: '100%', y: 600 };
  loading: boolean = true;
  rowKey: string = 'rec_id';
  selectedRowKeys: any[] = [];
  selectedRows: any[] = [];
  selectId: any = 0;
  ERD: any = null;
  paginationShow: boolean = true;
  draggable: boolean = false;
  __sourceIndex = 0;
  __targetIndex = 0;
  __sourceObj = {};
  __targetObj = {};

  mounted() {
    this.$nextTick(() => {
      let elementResizeDetectorMaker = require("element-resize-detector");
      this.ERD = elementResizeDetectorMaker();
      try {
        this.ERD.listenTo(document.querySelector('.main-table'), this.tableHeight);
      } catch (e: any) {

      }
    });
  }

  beforeDestroy() {
    this.mainTable && this.ERD.uninstall(this.mainTable);
  }

  get mainTable(): any {
    return this.$refs.maintable;
  }

  get tableHeight() {
    return debounce(this.resizeTableHeight, 0);
  }

  customRow(record: any, index: any) {
    return {
      attrs: {
        draggable: this.draggable,
        'data-index': index
      },
      class: {
        'select-active': record[this.rowKey] === this.selectId,
      },
      style: {
        color: record['color'],
        cursor: 'pointer'
      },
      on: {
        click: () => {
          if (this.selectId === record[this.rowKey]) return;
          this.selectId = record[this.rowKey];
          this.onSelect(record, index);
        },
        dragstart: (event: any) => {
          let ev = event || window.event;
          ev.stopPropagation();
          this.__sourceObj = record;
          this.__sourceIndex = Number(ev.target.dataset.index);
        },
        dragover: (event: any) => {
          let ev = event || window.event
          ev.preventDefault();
        },
        drop: (event: any) => {
          let ev = event || window.event;
          ev.stopPropagation();
          this.__targetIndex = Number(ev.currentTarget.dataset.index);
          this.__targetObj = record;
          this.onDraggable({
            sourceObj: this.__sourceObj, targetObj: this.__targetObj, sourceIndex: this.__sourceIndex, targetIndex: this.__targetIndex
          })
        }
      }
    }
  }

  get rowSelection() {
    const { selectedRowKeys } = this;
    return {
      selectedRowKeys,
      onChange: this.onSelectChange
    }
  }

  onSelectChange(selectedRowKeys: any, selectedRows: any) {
    this.selectedRowKeys = selectedRowKeys;
    this.selectedRows = selectedRows;
  }

  onDraggable({ sourceObj, targetObj, sourceIndex, targetIndex }: any) { 
    // @ts-ignore 默认存在tableData, 后期可修改成指定属性
    this.tableData[sourceIndex] = this.tableData.splice(targetIndex, 1, this.tableData[sourceIndex])[0];
  }

  resizeTableHeight() {
    // @ts-ignore
    let y = this.getEleHeight('.main-table') - this.getEleHeight('.ant-table-header') - this.getEleHeight('.ant-table-title');
    if (this.paginationShow) {
      let h = this.getEleHeight('.ant-pagination');
      y -= (h > 0 ? h * 2 : 64)
    }
    this.scroll.y = isNaN(y) ? this.scroll.y : y;
  };

  getEleHeight(name: string) {
    return document.querySelector(name)?.clientHeight || 0
  }

  // 该方法需要被覆盖
  onSelect(record: any, index: any) { }

  // 树组件配置
  treeConfig: any = {
    replaceFields: { children: 'children', title: 'label', key: 'id' },
    autoExpandParent: true,
    checkable: false,
    checkStrictly: false,
    defaultExpandAll: false,
    defaultExpandParent: true,
    disabled: false,
    draggable: false,
    multiple: false,
    showLine: false,
    defaultExpandedKeys: [],
    defaultCheckedKeys: [],
    defaultSelectedKeys: [],
    selectedKeys: [],
    check: '',
    select: '',
    expand: () => { },
    filterType: 0,
    filterData: [],
    labelValue: { label: 'label', value: 'value' },
    loading: false
  }

  sortProp(node: any[], parent: any = null) {
    node.forEach((n: any) => {
      n.isLeaf = n.leaf;
      n.parent = parent;
      if (n.children.length > 0) {
        this.sortProp(n.children, n);
      }
    })
  }
}
